Skip to content

Fixing minor UI bugs in Footnotes, Hero and SectionIntroStacked - #1385

Merged
rezrah merged 4 commits into
mainfrom
rezrah/p0-fixes-flexsuite
Jul 3, 2026
Merged

Fixing minor UI bugs in Footnotes, Hero and SectionIntroStacked#1385
rezrah merged 4 commits into
mainfrom
rezrah/p0-fixes-flexsuite

Conversation

@rezrah

@rezrah rezrah commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

Towards https://github.com/github/brand-experience/issues/289

Fixes 5 reported ui bugs in flex suite templates and their deps.

Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196245989
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196245548
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=192905495
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196638860
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=185436715

List of notable changes:

  • Updates icon with background border-radius from 8px to 12px in SectionIntroStacked
  • Updates Hero padding in gridline-expressive variant
  • Fixes dark mode bug in Expandable arrow stories
  • Reduces footnote spacing to 12px from 24px
  • Reduced the margin-top on hero actions for gridline-expressive variant

What should reviewers focus on?

  • Check the story links below.
  • Check we're comfortable with the Hero padding misalignment now that we've reduced inline padding

Steps to test:

Use the following links to verify changes:

  1. Updated footnote spacing
  2. Hero spacing on narrow
  3. Dark mode expandable arrows
  4. Rounded SectionIntroStacked icons
  5. Reduced height on Hero gridline-expressive variant actions

Contributor checklist:

  • All new and existing CI checks pass
  • Tests prove that the feature works and covers both happy and unhappy paths
  • Any drop in coverage, breaking changes or regressions have been documented above
  • UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
  • All developer debugging and non-functional logging has been removed
  • Related issues have been referenced in the PR description

Reviewer checklist:

  • Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • Check that tests prove the feature works and covers both happy and unhappy paths
  • Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before After
Screenshot 2026-06-29 at 15 46 16 Screenshot 2026-06-29 at 15 46 23
Before After
Screenshot 2026-06-29 at 15 47 50 Screenshot 2026-06-29 at 15 47 09
Before After
Screenshot 2026-06-29 at 15 48 17 Screenshot 2026-06-29 at 15 49 12

@rezrah
rezrah requested a review from a team as a code owner June 29, 2026 14:48
Copilot AI review requested due to automatic review settings June 29, 2026 14:48
@changeset-bot

changeset-bot Bot commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5953d24

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages
Name Type
@primer/react-brand Patch
@primer/brand-docs Patch
@primer/brand-css Patch
@primer/brand-primitives Patch
@primer/brand-e2e Patch
@primer/brand-fonts Patch
@primer/brand-mcp Patch
@primer/brand-config Patch
@primer/brand-storybook Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🟢 No design token changes found

@github-actions

github-actions Bot commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🟢 Bundle size report

CheckMainBranchChange
UMD — full bundle (JS)101.33 kB101.33 kB🟢 No change
UMD — full bundle (CSS)66.78 kB66.74 kB✅ -46 B (-0.1%)
ESM — full bundle (JS + CSS)1.51 MB1.51 MB⬆️ +276 B (+0.0%)
ESM — tree-shaken simple (Button)69.66 kB69.69 kB⬆️ +32 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)78.44 kB78.47 kB⬆️ +32 B (+0.0%)

Copilot AI reviewed Jun 29, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses a set of small UI/Storybook presentation fixes across Primer Brand components used in Flex templates, aligning component styling with the reported design adjustments (spacing, padding, and icon rounding), and improving dark-mode presentation for the ExpandableArrow Storybook stories.

Changes:

  • Increased SectionIntroStacked icon border-radius to match the updated spec (8px → 12px).
  • Adjusted Hero gridline-expressive column padding on narrow viewports, including reduced inline padding.
  • Reduced Footnotes item spacing (gap 24px → 12px) and wrapped ExpandableArrow stories in Text to ensure correct currentColor behavior in dark mode.
Show a summary per file
File Description
packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css Updates icon border-radius token usage to achieve 12px rounding.
packages/react/src/Hero/Hero.module.css Tweaks narrow-viewport padding for expressive header/body columns to address alignment.
packages/react/src/Footnotes/Footnotes.module.css Reduces vertical spacing between footnote items via gap.
packages/react/src/ExpandableArrow/ExpandableArrow.stories.tsx Adds a Text decorator to set an appropriate inherited text color in dark mode; minor wrapper adjustment for hover story.
.changeset/section-intro-stacked-icon-radius.md Changeset documenting the SectionIntroStacked icon radius adjustment (patch).
.changeset/hero-gridline-expressive-narrow-padding.md Changeset documenting the Hero narrow padding adjustment (patch).
.changeset/footnotes-gap-reduce.md Changeset documenting the Footnotes gap reduction (patch).

Review details

  • Files reviewed: 7/13 changed files
  • Comments generated: 0
  • Review effort level: Low

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

@jesussandreas

jesussandreas commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

@rezrah I was going to add here, for the footer notes.

lets align it to the content as well. please 🙏

Screenshot 2026-06-30 at 9 51 42 AM

danielguillan
danielguillan approved these changes Jul 1, 2026
View reviewed changes

@danielguillan danielguillan left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good!

@rezrah
rezrah temporarily deployed to github-pages July 3, 2026 09:17 — with GitHub Actions Inactive
@rezrah

rezrah commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator Author

@jesussandreas your screenshot is from the prod page, we'll need to apply that change in the flex template directly. cc. @rfearing could i leave that with you please? It looks like you'll need to apply the same Box + padding that you applied to the FAQ group heading to the footnotes to fix this. I've added some footnotes to the storybook to have this represented there too.

Screenshot 2026-07-03 at 10 07 12

@rezrah
rezrah merged commit 7d7800f into main Jul 3, 2026
17 checks passed
@rezrah
rezrah deleted the rezrah/p0-fixes-flexsuite branch July 3, 2026 09:26
@primer primer Bot mentioned this pull request Jul 3, 2026
Merged
@github-actions github-actions Bot mentioned this pull request Jul 6, 2026
Closed
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@danielguillan danielguillan danielguillan approved these changes
@jesussandreas jesussandreas Awaiting requested review from jesussandreas

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rezrah @jesussandreas @danielguillan